<!-- 视频 -->
<template>
	<view class="video-box">
		<scroll-view class="scroll-video" :scroll-x="true" :scroll-with-animation="true" v-if="videoList.length > 0">
			<view class="scroll-video-item" v-for="(item, inx) in videoList" :key="inx" @click.stop="ceshiBtn(item)">
				<view class="video-left-bottom">
					<view class="video-bottom-title line-text">
						<text>{{ item.title }}</text>
					</view>
					<view class="df-cen-rl">
						<view @click.stop="headBtn(item)">
							<avatar-name :name="item.nickname" :nameWidth="110"
								:avatar="!item.headimg ? staticImgUrl + 'home/user.png' : $Utils.img(item.headimg)"
								color="#ffffff"></avatar-name>
						</view>
						<view class="df-ai-cen video-bottom-count">
							<image :src="staticImgUrl + 'home/pinglun.png'" mode=""
								style="width: 20rpx;height: 28rpx;margin-right: 4rpx;"></image>
							<text>{{ item.love_num }}</text>
						</view>
					</view>
				</view>
				<!-- aspectFit aspectFill -->
				<image :src="$Utils.img(item.image)" mode="aspectFill" class="image-radius"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		name: 'video-box',
		data() {
			return {
				videoList: []
			};
		},
		props: {
			site_id:{
				type: [Number, String],
				default: 0
			}
		},
		computed: {
			...mapGetters(['isVerify'])
		},
		methods: {
			ceshiBtn(val) {
				// #ifdef MP-WEIXIN
				if (this.isVerify == 0) {
					this.$Utils.tip('暂未开放，敬请期待~~~');
					return false;
				}
				// #endif
				this.$Router.push({
					path: '/livePages/video/video',
					query: {
						video_id: val.id
					}
				});
				// this.$Utils.tip('正在逐步开放，请先前往醒目购app观看(#^.^#)');
			},
			// 头像部分点击
			headBtn(val) {
				console.warn('视频组件头像部分点击', val);
			}
		},
		mounted() {
			this.$Apis.getHomeVideo({site_id:this.site_id}).then(res => {
				this.videoList = res.list;
				// console.log('getHomeVideo', res);
			});
		}
	};
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.video-box {
		padding: 0 0 5rpx 30rpx;

		.scroll-video {
			white-space: nowrap;
			width: 100%;

			.scroll-video-item {
				position: relative;
				display: inline-block;
				width: 290rpx;
				height: 400rpx;
				margin-right: 20rpx;
				overflow: hidden;
				border-radius: 20rpx;
				background-color: #f9f9f9;
			}

			.video-left-bottom {
				width: 280rpx;
				position: absolute;
				bottom: 10rpx;
				left: 10rpx;
				padding: 2rpx 10rpx 2rpx 2rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				z-index: 2;
			}

			.video-bottom-title {
				width: 100%;
				margin-bottom: 16rpx;
				overflow: hidden;
			}

			.video-bottom-count {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}

			.image-radius {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}
</style>
